<template>
    <j-modal
      :title="title"
      :width="width"
      :visible="visible"
      :confirmLoading="confirmLoading"
      switchFullscreen
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭">
      <a-spin :spinning="confirmLoading">
        <a-form :form="form">
          <a-form-item label="位置" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-select v-decorator="['position',validatorRules.position]" placeholder="请选择广告位置">
              <a-select-option :value="0">首页顶部</a-select-option>
              <a-select-option :value="1">首页中部-左</a-select-option>
              <a-select-option :value="2">首页中部-右</a-select-option>
              <a-select-option :value="3">服务列表</a-select-option>
            </a-select>
          </a-form-item>
          <!-- <a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="['title']" placeholder="请输入标题"></a-input>
          </a-form-item>
          <a-form-item label="副标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="['subtitle']" placeholder="请输入副标题"></a-input>
          </a-form-item> -->
          <a-form-item label="广告" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <demo-upload v-model="model.imageUrl"></demo-upload>
          </a-form-item>
          <a-form-item label="跳转类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-select v-decorator="['type',validatorRules.type]" v-model="model.type" placeholder="请选择跳转类型">
              <a-select-option :value="0">无跳转</a-select-option>
              <a-select-option :value="1">链接</a-select-option>
              <a-select-option :value="2">小程序</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="跳转路径" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="model.type > 0">
            <a-input v-decorator="['jumpPath']" placeholder="请输入跳转路径"></a-input>
          </a-form-item>
          <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input-number :min="0" :max="99" v-decorator="['sort',validatorRules.sort]" @change="onChange"/>
          </a-form-item>
          <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-switch checked-children="启用" un-checked-children="禁用" default-checked @change="switchOn"
                      v-model="checked"/>
          </a-form-item>
        </a-form>
      </a-spin>
    </j-modal>
  </template>
  
  <script>
  
    import {httpAction} from '@/api/manage'
    import pick from 'lodash.pick'
    import JDate from '@/components/jeecg/JDate'
    import DemoUpload from '@/components/jeecg/DemoUpload'
  
  
    export default {
      name: "SmsHomeCarouselModal",
      components: {
        DemoUpload,
        JDate,
      },
      data() {
        return {
          form: this.$form.createForm(this),
          title: "操作",
          width: 800,
          visible: false,
          checked: true,
          model: {},
          labelCol: {
            xs: {span: 24},
            sm: {span: 5},
          },
          wrapperCol: {
            xs: {span: 24},
            sm: {span: 16},
          },
          confirmLoading: false,
          validatorRules: {
            position: {
              rules: [{required: true, message: '请选择广告位置!'},]
            },
            type: {
              rules: [{required: true, message: '请选择跳转类型!'},]
            },
            sort: {
              rules: [{required: true, message: '请输入排序!'},]
            },
          },
          url: {
            add: "/sms/smsHomeCarouselRelation/add",
            edit: "/sms/smsHomeCarouselRelation/edit",
          }
        }
      },
      created() {
      },
      methods: {
        add() {
          this.edit({status: 0});
        },
        edit(record) {
          this.form.resetFields();
          this.model = Object.assign({}, record);
          this.visible = true;
          if (record.status) {
            this.checked = record.status == 0 ? true : false;
          }
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.model, 'imageUrl', 'sort', 'title', 'subtitle', 'type', 'position', 'status', 'createBy', 'createTime', 'updateBy', 'updateTime', 'delFlag', 'jumpPath'))
          })
        },
        close() {
          this.$emit('close');
          this.visible = false;
        },
        handleOk() {
          const that = this;
          // 触发表单验证
          this.form.validateFields((err, values) => {
            if (!err) {
              that.confirmLoading = true;
              let httpurl = '';
              let method = '';
              if (!this.model.id) {
                httpurl += this.url.add;
                method = 'post';
              } else {
                httpurl += this.url.edit;
                method = 'put';
              }
              let formData = Object.assign(this.model, values);
              console.log("表单提交数据", formData)
              httpAction(httpurl, formData, method).then((res) => {
                if (res.success) {
                  that.$message.success(res.message);
                  that.$emit('ok');
                } else {
                  that.$message.warning(res.message);
                }
              }).finally(() => {
                that.confirmLoading = false;
                that.close();
              })
            }
  
          })
        },
        handleCancel() {
          this.close()
        },
        popupCallback(row) {
          this.form.setFieldsValue(pick(row, 'imageUrl', 'sort', 'title', 'subtitle', 'type', 'position', 'status', 'createBy', 'createTime', 'updateBy', 'updateTime', 'delFlag', 'jumpPath'))
        },
        onChange(value) {
          this.model.sort = value;
        },
        switchOn(checked) {
          if (checked) {
            this.model.status = 0;
            this.checked = true;
          } else {
            this.model.status = 1;
            this.checked = false;
          }
        },
      }
    }
  </script>